<template>
	<view>
		<view class="order-item">
			<view class="goods-info">
				<image :src="order_info.cover" mode=""></image>
				<view class="info">
					<text class="name">{{order_info.goods_name}}</text>
					<text class="time">预约时间：{{$db.timeStampToTime(time * 1000)}}</text>
				</view>
			</view>
		</view>
		<view class="addr-wrapper">
			<view class="name-and-mobile">
				<text class="name">收货人：{{addr_item.name}}</text>
				<text class="mobile">{{addr_item.mobile}}</text>
			</view>
			<text class="addr-info">配送地址：{{$db.getAddrById(addr_item.area_id)}} {{addr_item.address}}</text>
			<text class="tip">注：最晚送餐前两小时可申请推迟、顺延时间或修改地址</text>
			<text class="addr-btn" @click="changeAddr" v-if="order_info.dishes_status === 1">更换地址</text>
		</view>
		<view class="delay-btn" @click="$db._NavTo('order-delay-page', {order_id: order_id})" v-if="order_info.dishes_status === 1">
			<text>申请推迟</text>
		</view>
		<view class="delay-btn" @click="cliTakeDelivery(order_id)" v-else-if="order_info.dishes_status === 2">
			<text>确认收货</text>
		</view>
		<view class="delay-btn" @click="$db._NavTo('comment', {order_id: order_info.order_id, type: 'food'})" v-else-if="order_info.dishes_status === 3">
			<text>去评价</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: 0,
				order_info: {},
				address_id: 0,
				addr_item: {},
				time: ''
			};
		},
		onLoad(o) {
			if (o.order_id) {
				this.order_id = o.order_id
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData: function() {
				this.$api.getCycliceOrderDetail({
						order_id: this.order_id
					})
					.then(res => {
						this.time = res.data.p_time + (res.data.dish_type == 1 ? res.data.wu_time : res.data.wan_time)
						this.address_id = res.data.address_id;
						this.order_info = res.data;
						this.addr_item.address = res.data.ship_address
						this.addr_item.area_id = res.data.ship_area_id
						this.addr_item.mobile = res.data.ship_mobile
						this.addr_item.name = res.data.ship_name
						// this.getAddress();
					})
			},
			// getAddress: function() {
			// 	// 获取订单地址详情
			// 	this.$api.getAddressInfo({
			// 			id: this.address_id
			// 		})
			// 		.then(res => {
			// 			this.addr_item = res.data
			// 		})
			// },
			changeAddr: function() {
				// 选择地址
				uni.$once('chack_addr', res => {
					if (!('data' in res)) {
						return false;
					}
					this.address_id = res.data.id
					this.$db._GoBack();
					// 更换地址请求
					this.$api.updateAddress({
							order_id: this.order_id,
							address_id: this.address_id,
						})
						.then(res => {
							console.log(res);
							this.$db._ShowToast(res.msg, () => {
								this.getData();
							})
						})
				})
				// 更换地址
				this.$db._NavTo('addressList_page')
			},
			cliTakeDelivery: function(order_id) {
				// 确认收货
				this.$api.updateOrderStatus({
						order_id
					})
					.then(res => {
						this.$db._ShowToast(res.msg, () => {
							// 初始化分页
							this.getData();
						})
					})
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		padding: 48rpx 12rpx;
		margin: 0 28rpx;
		border-bottom: 2px solid rgba(242, 242, 242, 1);

		.goods-info {
			display: flex;

			image {
				flex: 0 0 138rpx;
				width: 138rpx;
				height: 138rpx;
				border-radius: 10rpx;
			}

			.info {
				flex: 0 0 470rpx;
				padding-left: 22rpx;
				display: flex;
				flex-flow: column;

				.name {
					font-size: 32rpx;
					color: rgba(37, 37, 37, 1);
				}

				.time {
					margin-top: auto;
					margin-bottom: 8rpx;
					font-size: 22rpx;
					color: #C19101;
				}
			}
		}
	}

	.addr-wrapper {
		box-sizing: border-box;
		margin: 36rpx auto 0;
		padding: 40rpx 58rpx;
		width: 642rpx;
		display: flex;
		flex-flow: column;
		border-radius: 10rpx;
		border: 1px solid rgba(201, 201, 201, 1);

		.name-and-mobile {
			display: flex;
			align-items: center;

			.name {
				font-size: 26rpx;
				color: #424242;
			}

			.mobile {
				margin-left: auto;
				font-size: 26rpx;
				color: #424242;
			}
		}

		.addr-info {
			margin: 20rpx 0 16rpx;
			font-size: 26rpx;
			color: #424242;
		}

		.tip {
			font-size: 24rpx;
			color: #C19101;
		}

		.addr-btn {
			margin-top: 16rpx;
			margin-left: auto;
			padding: 8rpx 16rpx;
			border: 1px solid rgba(157, 157, 157, 1);
			border-radius: 10rpx;
			color: #C19101;
		}
	}

	.delay-btn {
		margin: 300rpx auto 0;
		width: 554rpx;
		height: 72rpx;
		text-align: center;
		border-radius: 36rpx;
		background: #DFBB50;

		text {
			line-height: 72rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 500;
		}
	}
</style>
